<template>
	<view class="list">
		<view class="list-item" v-for="(item,index) in productList" :key="index" @click="clickFun(item.title)">
			<view class="list-item-box">
				<view class="image">
					<u-image
						width="230rpx" 
						height="230rpx" 
						border-radius="8"
						:src="item.url"></u-image>
				</view>
				<view class="info">
					<view class="info-title u-font-md">{{item.title}}</view>
					<view class="info-name">
						<u-image
							class="icon"
							width="40rpx" 
							height="40rpx"
							src="/static/icons/brand_icon.png"></u-image>
						<view class="text">品牌名称: {{item.brand_name}}</view>
					</view>
					<view class="info-fans">
						<u-image
							class="icon"
							width="40rpx" 
							height="40rpx"
							src="/static/icons/fans_icon.png"></u-image>
						<view class="text">粉丝要求: {{item.fans_ask}}</view>
					</view>
					<view class="info-checked">
						<u-image
							class="icon"
							width="40rpx" 
							height="40rpx"
							src="/static/icons/checked_icon.png"></u-image>
						<view class="text">{{item.ckecked}}</view>
						<view class="source">{{item.source}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		productList: {
			type: Array,
			default() {
				return []
			}
		}
	},
	methods: {
		clickFun(item) {
			this.$emit("clickFun",item);
		},
	},
}
</script>

<style lang="scss" scoped>
.list {
	&-item {
		background-color: $u-bg-white-color;
		padding: 45rpx 25rpx;
		margin-bottom: 20rpx;
		&:last-of-type {
			margin-bottom: 0;
		}
		&-box {
			display: flex;
			.image {
				width: 230rpx;
				margin-right: 20rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				width: 100%;
				&-title {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					display: -moz-box;
					-moz-line-clamp: 2;
					-moz-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal;
					line-height: 36rpx;
					font-weight: 600;
					color: $u-text-color;
				},
				&-name, &-fans, &-checked {
					display: flex;
					.icon {
						margin-right: 12rpx;
					}
					.text {
						color: $u-text-color;
					}
				}
				&-name {
					align-items: center;
				}
				&-fans {
					align-items: center;
				}
				&-checked {
					align-items: center;
					.text {
						flex: 1;
						color: $u-text-light-color;
					}
					.source {
						color: $u-text-light-color;
					}
				}
			}
		}
	}
}
</style>
